<template>
  <div>
    <div><h1>按用例统计</h1></div>
    <Base :id="'bargraph1'" :data="option2" style="height:600px;"></Base>

    <Base :id="'bargraph13'" :data="option3" style="height:600px;"></Base>

    <Base :id="'bargraph14'" :data="option4" style="height:600px;"></Base>
  </div>
</template>

<script>
  import linegraph from './baseEchartsCalendar.vue'
  import Base from './baseEcharts.vue'

  export default {
    name: "report",
    data() {
      return {
        option2: {
          legend: {},
          tooltip: {},
          toolbox: {
            feature: {
              dataView: {},
              saveAsImage: {
                pixelRatio: 2
              },
              restore: {}
            }
          },
          dataset: {
            // source: [
            //   ['product', '2012', '2013', '2014', '2015'],
            //   ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            //   ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            //   ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
            // ]
            source: [
              ['product', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
              ['用例总数', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 98.7],
              ['执行用例数', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1, 98.7],
              ['用例失败数', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5, 98.7],
              ['用例未执行数', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1, 98.7]
            ]
          },
          xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
          ],
          yAxis: [
            {gridIndex: 0},
            {gridIndex: 1}
          ],
          grid: [
            {bottom: '55%'},
            {top: '55%'}
          ],
          series: [
            // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
          ]
        },

        option3: {
          title: {
            text: '当月用例报告'
          },
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          toolbox: {
            feature: {
              dataView: {},
              saveAsImage: {
                pixelRatio: 2
              },
              restore: {}
            }
          },
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['用例总数', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
              ['执行用例数', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
              ['用例失败数', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
              ['用例未执行数', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
          },
          xAxis: {
            type: 'category',
            // data: ["2012", "2013", "2014", "2015", "2016", "2017"]
          },
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        },

        option4: {
          legend: {},
          tooltip: {},
          dataset: {
            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
              {product: '总数', '2015': 43.3, '2016': 85.8, '2017': 93.7},
              {product: '执行数', '2015': 83.1, '2016': 73.4, '2017': 55.1},
              {product: '失败数', '2015': 86.4, '2016': 65.2, '2017': 82.5},
              {product: '未执行', '2015': 72.4, '2016': 53.9, '2017': 39.1}
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
          ]
        }

      }
    },
    components: {
      linegraph,
      Base
    }
  }
</script>
